<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <meta name="keywords" content="{:C('WEB_SITE_KEYWORD')}">
        <meta name="description" content="{:C('WEB_SITE_DESCRIPTION')}">
        <link rel="shortcut icon" href="__PUBLIC__/favicon.ico">
        <title>{$title}</title>
        <link rel="stylesheet" href="__PUBLIC__/App/cndota/css/style.css">
        <!-- 引入 jQuery 库 -->
        <script src="__PUBLIC__/App/cndota/js/jquery-2.1.4.min.js"></script>
        <script src="__PUBLIC__/App/cndota/js/knockout-2.3.0.js"></script>
        <script src="__PUBLIC__/App/cndota/js/radialIndicator.min.js"></script>
        <script src="__PUBLIC__/App/cndota/js/scrollTo.js"></script>
        <script src="__PUBLIC__/App/cndota/js/cndota.js"></script>
        <script type="text/javascript">
            {:C('GLOBAL_BDHM')}
        </script>
    </head>
    <body>
        <header class="back_black">
            <div class="width1270">
                <a href="{:U('home/visitor/index')}" class="logo" target="_blank"></a>
                <empty name="user">
                <p class="font13 right gray">尊敬的用户，参与活动请先<a href="{:U('home/user/login')}" class="orange">&nbsp;登录</a></p>
                </empty>
            </div>
        </header>
        <!--导航锚点-->
        <div class="relative banner width1270">
            <nav>
                <ul>
                    <li><a href="#1" class="nav-desc"></a></li>
                    <li><a href="#2" class="nav-forecast"></a></li>
                    <li><a href="#3" class="nav-report"></a></li>
                    <li><a href="#4" class="nav-share"></a></li>
                </ul>
            </nav>
        </div>
        <!--part1-->
        <div class="cn-one width1270">
            <h1 class="cn-one-title"></h1>
            <p class="cndesc font14"><span>活动说明：</span>
            <span>1、在6月6日至6月12日比赛期间，玩家每天可以参与一次“我为西恩续一秒”活动。随着为西恩刀塔续命秒数的不断增加，奖品池中也会不断解锁新的奖品。</span><span>全部奖品将会在比赛结束后送出，中奖名单将会在66Play官方微博中公布。大家一起为西恩刀塔加油！</span>
            <span>活动规则：</span>
            <span>1.初始奖品池为1个至宝，每为西恩刀塔续命2000秒就会再增加一个至宝。</span>
            <span>2.当续命时间达到特定数字后还会解锁额外的特殊奖励。</span>
            <span>3.全部奖品将以随机抽取的方式送出，请关注66Play的官方微博@66Play电子竞技。</span>
            <button class="plus-one" data-bind="click:a1s"></button>
            <button class="plus-one-active" disabled="disabled" style="display: none;"></button>
        </p>
        <ul class="prize-img orange">
            <!-- ko foreach:giftList1 -->
            <li class="" data-bind="css:{'reach':unlock}">
                <p data-bind="event:{mouseover:m_over, mouseout:m_out}">
                    <!-- <img src="__PUBLIC__/App/cndota/images/prize01.jpg"> -->
                    <img src="" data-bind="attr:{'src':logo}" />
                    <!-- ko if: !unlock -->
                    <span class="unlock"></span>
                    <span id="indicatorContainer" data-percent="" data-bind="attr:{'data-percent':percent}" class="indicatorContainer absolute font30 white"></span>
                    <!-- /ko -->
                    <span class="watch-span absolute">
                        <button class="downloadbtn orange font12" data-bind="click:play">预览奖励</button>
                    </span>
                </p>
                <span data-bind="text:text"></span>
            </li>
            <!-- /ko -->
            <div class="progress-bar" data-bind="foreach:giftList1">
                <p class="current-bar-p display-box">
                    <!-- ko if: $index() > 0 && progressBarShow-->
                    <!-- ko if: percent == 100 -->
                    <span class="current-bar box-flexo"></span>
                    <!-- /ko -->
                    <!-- ko if: percent < 100 -->
                    <span class="current-bar" data-bind="style:{'width':progressWidth}"></span>
                    <!-- /ko -->
                    <!-- /ko -->
                    <!-- ko if:unlock -->
                    <em></em>
                    <!-- /ko -->
                </p>
            </div>
            <!-- ko foreach:giftList2 -->
            <li class="" data-bind="css:{'reach':unlock}">
                <p data-bind="event:{mouseover:m_over, mouseout:m_out}">
                    <!-- <img src="__PUBLIC__/App/cndota/images/prize01.jpg"> -->
                    <img src="" data-bind="attr:{'src':logo}" />
                    <!-- ko if: !unlock -->
                    <span class="unlock"></span>
                    <span id="indicatorContainer" data-percent="" data-bind="attr:{'data-percent':percent}" class="indicatorContainer absolute font30 white"></span>
                    <span class="watch-span absolute">
                        <button class="downloadbtn orange font12" data-bind="click:play">预览奖励</button>
                    </span>
                    <!-- /ko -->
                </p>
                <span data-bind="text:text"></span>
            </li>
            <!-- /ko -->
            <li>
                <p>
                    <img src="__PUBLIC__/App/cndota/images/prize09.jpg">
                    <span class="unlock"></span>
                </p>
                <span>神秘大奖 100,000以上公布</span>
            </li>
            <div class="progress-bar1"  data-bind="foreach:giftList2">
                <p class="current-bar-p display-box">
                    <!-- ko if: $index() > 0 && progressBarShow-->
                    <!-- ko if: percent == 100 -->
                    <span class="current-bar box-flexo"></span>
                    <!-- /ko -->
                    <!-- ko if: percent < 100 -->
                    <span class="current-bar" data-bind="style:{'width':progressWidth}"></span>
                    <!-- /ko -->
                    <!-- /ko -->
                    <!-- ko if:unlock -->
                    <em></em>
                    <!-- /ko -->
                </p>
            </div>
            <div class="prize-con font13">
                <b class="font32">Data</b>
                <span>共续命 <em class="red" data-bind="text:count.curCount"></em> 秒</span>
                <span>距离下一个至宝 <em class="red" data-bind="text:count.next"></em> 秒</span>
                <span>已累积 <em class="red" data-bind="text:count.gift"></em> 个至宝</span>
            </div>
        </ul>
    </div>

    <!--part2-->
    <div class="cn-two width1270">
        <h1 class="cn-two-title"></h1>
        <p class="cndesc">
            <span>活动说明：</span>
            在6月12日春季赛总决赛前可以参与春季赛冠军预测，我们将会为预测正确的玩家送出10个至宝，如果冠军是由中国队获得，我们将会额外再送出10个至宝。中奖名单会在活动结束后于66Play官方微博中公布。全部奖品将以随机抽取的方式送出，请关注66Play的官方微博@66Play电子竞技。
        </p>
        <div class="pistons">
            <!-- ko if:teamInfo() -->
            <div class="pistons-bigipc" data-bind="with:teamInfo">
                <div class="piston-pic left"><img src="" data-bind="attr:{'src':cover}"></div>
                <div class="piston-desc right relative">
                    <p>
                        <span>战队：<!-- ko text:name--><!-- /ko --></span>
                        <span>预测夺冠人数： <!-- ko text:count() --><!-- /ko --></span>
                        <span>战队简介：</span>
                        <!-- ko text:description--><!-- /ko -->
                    </p>
                    <!-- ko if:!viewModel.isForecast() -->
                    <button class="piston-vote white" data-bind="click:forecast">
                        <span class="font16">兹瓷 <!-- ko text:shortname--><!-- /ko --> 夺冠</span>
                        <span class="font12">Select the team</span>
                    </button>
                    <!-- /ko -->
                    <!-- ko if:viewModel.isForecast() -->
                    <button class="piston-vote-active relative"></button>
                    <!-- /ko -->
                </div>
            </div>
            <!-- /ko -->
            <ul class="piston-ul font14" data-bind="foreach:teamList">
                <li>
                    <p class="JS-team">
                        <img src="" data-bind="attr:{'src':logo},click:showDetail, style:{'opacity':opacity}"/>
                    </p>
                    <span data-bind="text:shortname"></span>
                </li>
            </ul>
        </div>
    </div>

    <!--part3-->
    <div class="cn-three width1270">
        <h1 class="cn-three-title"></h1>
        <p class="cndesc font14">
            <span>66Play首创片段式直播，记录比赛中的精彩瞬间，不熬夜不错过，三分钟看完整场比赛。短视频、低流量、全程高能！</span>
        </p>
        <div class="pistons-bigipc">
            <div class="piston3-pic left relative">
                <iframe src="{:U('Home/VideoPlay/play', ['id' => $raceId])}" scrolling="no" frameborder="0"></iframe>
                <button class="downloadplay-btn orange font14 absolute" onclick="downloadplay();">下载66Play APP</button>
            </div>
            <div class="piston3-events right">
                <h1 class="orange">
                    <span class="font14 left">战报速递</span>
                    <a href="{:U('Home/Match/races', ['id' => $matchId])}" class="font14 right" target="_blank">查看更多+</a>
                </h1>
                <ul class="events" data-bind="foreach:raceList">
                    <li>
                        <a href="" target="_blank" class="display-box" data-bind="attr:{'href':matchLink[0].link}">
                            <p class="events-li-left">
                                <img src="" data-bind="attr:{'src':team1.logo}"/>
                                <span data-bind="text:team1.name"></span>
                            </p>
                            <p class="events-mes box-flexo">
                                <span class="font12" data-bind="text:time"></span>
                                <span>
                                    <b class="num0 font30" data-bind="text:team1.score">0</b>
                                    <b class="colon">:</b>
                                    <b class="num0 font30" data-bind="text:team2.score">0</b>
                                </span>
                                <span class="events-name font12">比赛集锦</span>
                            </p>
                            <p class="events-li-left">
                                <img src="" data-bind="attr:{'src':team2.logo}"/>
                                <span data-bind="text:team2.name"></span>
                            </p>
                        </a>
                        <p class="more-event font12" data-bind="foreach:matchLink">
                            <a href="" data-bind="attr:{'href':link}, text:$index()+1"></a>
                        </p>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <!--part4-->
    <div class="cn-four width1270 relative">
        <h1 class="cn-four-title"></h1>
        <p class="jf-rule left font14">
            <span>活动说明：</span>
            将活动页面分享给你的小伙伴，邀请你的小伙伴一起为西恩刀塔加油，每有一个小伙伴参与你都会获得一定的积分，你可以在66Play APP中使用积分来兑换刀币和饰品皮肤等。
            <span>活动规则：</span>
            <span>1.分享此活动页面，每有一位小伙伴通过你分享的链接参与活动你都可以获得300积分，1000积分即可兑换1000刀币；</span>
            <span>2.积分只能在66Play APP中兑换，分享成功后积分会自动添加到你的账号中。</span>
            <span><a onclick="rule();">查看积分规则 ></a></span>
            <button class="download66" onclick="downloadplay();"></button>
        </p>
        <img src="__PUBLIC__/App/cndota/images/prat-pic.png" class="absolute"/>
    </div>
    <!--part5-->
    <notempty name="winnerList">
        <div class="cn-five">
            <div class="width1270">
                <h1 class="cn-five-title"></h1>
                <div class="winners-left">
                    <span>
                        <b class="font20">我为西恩续一秒</b>
                        <b class="font40">获奖名单</b>
                    </span>
                    <div class="table">
                        <table class="font13 orange">
                            <tbody>
                                <tr class="font14">
                                    <th>获奖账号</th><th>获奖奖品</th><th>是否领奖</th>
                                </tr>
                                <tr>
                                    <td>185****4587</td>
                                    <td>Dota2 至宝 x1</td>
                                    <td>未领奖请尽快联系工作人员</td>
                                </tr>
                                <tr>
                                    <td>185****4587</td>
                                    <td>Dota2 至宝 x1</td>
                                    <td>已领奖</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="winners-left">
                    <span>
                        <b class="font20">我为西恩续一秒</b>
                        <b class="font40">获奖名单</b>
                    </span>
                    <div class="table">
                        <table class="font13 orange">
                            <tbody>
                                <tr class="font14">
                                    <th>获奖账号</th><th>获奖奖品</th><th>是否领奖</th>
                                </tr>
                                <tr>
                                    <td>185****4587</td>
                                    <td>Dota2 至宝 x1</td>
                                    <td>未领奖请尽快联系工作人员</td>
                                </tr>
                                <tr>
                                    <td>185****4587</td>
                                    <td>Dota2 至宝 x1</td>
                                    <td>已领奖</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </notempty>
    <!--part6-->
    <div class="cn-six">
        <div class="width1270">
            <div class="play-mes left">
                <p class="logo-btn">
                    <span class="play-logo left"></span>
                    <a href="{:U('Home/Download/index')}" class="downloadbtn orange right font12" target="_blank">下载工具</a>
                </p>
                <p class="play-desc font14">
                    <span>66Play最轻量级录制工具，独创“时光机”录制模式。<em class="orange">[开启录制模式后，只需点击热键即可即时记录上一分钟的炫酷操作]</em>，
                    轻松记录属于你的高光瞬间。</span>
                    <span>记录精彩时刻，保存游戏足迹，打造专属于你的游戏藏宝室！</span><br><br><br><br>
                    <span>官方微博账号：<a href="http://weibo.com/p/1006065640304166/home?from=page_100606&mod=TAB&is_all=1#1464945059024" target="_blank">66play电子竞技</a></span>
                    <span>微信公众号：66Play</span>
                    <span>官方网站：<a href="http://www.66Play.com" target="_blank">www.66Play.com</a></span>
                </p>
            </div>
            <p><img src="__PUBLIC__/App/cndota/images/footerpic.png" class="right"/></p>
        </div>
    </div>
    <a href="#0" class="cd-top"></a>

    <!--下载弹窗S-->
    <div id="downPopup"></div>
    <div class="popbg" onclick="hid()"></div>
    <!--下载弹窗E-->

    <script type="text/javascript">
        window._THIS = {
            videoPlayer : "{:U('Home/VideoPlay/play')}",
            matchLink : "{:U('Home/Share/match')}",
            qrcodeImg : "__PUBLIC__/App/cndota/images/weixinma.jpg",
            bgImg : "__PUBLIC__/App/cndota/images/bgtop.jpg",
        };
        var curCount = {$curCount};
        var giftList = {$giftList|json_encode};
        var teamList = {$teamList|json_encode};
        var raceList = {$raceList|json_encode};
        var forecastTeamId = {$forecast};

        function initData() {
            if ({$a1s}) {
                $('.plus-one').hide();
                $('.plus-one-active').show();
            }
            viewModel.isForecast(forecastTeamId > 0);
        }
        var forecast = function(obj, e) {
            var team_id = viewModel.teamInfo().id;
            $.post("{:U('Cndota/forecast')}", {team_id: team_id}, function(data, textStatus, xhr) {
                if (data.state == -2) {
                    location.href = "{:U('Home/User/login')}";
                    return;
                }
                if (data.state == 0) {
                    viewModel.isForecast(true);
                    viewModel.teamInfo().count(viewModel.teamInfo().count()+1);
                }
            });
        }
        var a1s = function() {
            $.get("{:U('Cndota/a1s')}", function(data) {
                if (data.state == -2) {
                    location.href = "{:U('Home/User/login')}";
                    return;
                }
                if (data.state == 0) {
                    curCount++;
                    loadTeamData();
                    $.tipsBox({
                        obj: $('.plus-one'),
                        str: "+1",
                        callback: function() {
                            $('.plus-one').hide();
                            $('.plus-one-active').show();
                        }
                    });
                    niceIn($('.plus-one'));
                }
            });
        }
    </script>
</body>
</html>